<template>
  <div class="bg">
    <img :src="currentImage" alt="Random Image" class="character-image">
    
    <!-- 庆祝效果 -->
    <div class="celebration">
      <div class="confetti" v-for="n in 50" :key="n" :style="confettiStyle(n)"></div>
    </div>
    
    <!-- 成就徽章 -->
    <div class="achievement-badge">
      <div class="badge-icon">🏆</div>
      <div class="badge-text">拼图大师</div>
    </div>

    <h1 class="overlay-text">{{randomText}}</h1>
    
    <!-- 分享按钮 -->
    <div class="share-buttons">
      <button class="share-btn" @click="shareResult">
        <span class="btn-icon">📤</span>
        <span class="btn-text">分享成就</span>
      </button>
      <button class="retry-btn" @click="playAgain">
        <span class="btn-icon">🔄</span>
        <span class="btn-text">再玩一次</span>
      </button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'success',
  data() {
    return {
      currentImage: '',
      images: [
        'https://i-blog.csdnimg.cn/direct/a428a78cce5c4706bcdad0a15b46a132.png',
        'https://i-blog.csdnimg.cn/direct/94c5b8ea9d8f4973bbb221eb21a567ed.jpeg',
        'https://img-blog.csdnimg.cn/direct/e8c623fb6a0b4817a0ca30eb9654a920.png',
        'https://img-blog.csdnimg.cn/direct/45589c95733b4c39902711601280bef4.jpeg',
        'https://img-blog.csdnimg.cn/direct/bcf2dae073c54bbf9b2cc3f55b3f80b8.jpeg',
        'https://img-blog.csdnimg.cn/direct/4f2f1d58824d4ccf8ebef443d7591b5e.png',
        'https://img-blog.csdnimg.cn/direct/c6c5de54f38d4aaa9e1d867794c42c02.jpeg',
        'https://img-blog.csdnimg.cn/direct/735388f5489a49f6a6ff778c9b22fba9.jpeg',
        'https://img-blog.csdnimg.cn/direct/46bf53fdf8ee45cda15a32c606181ecf.jpeg',
        'https://img-blog.csdnimg.cn/direct/8978e8b8119a46ebbb61caeee98b357c.jpeg',
        'https://img-blog.csdnimg.cn/d197bb0614d84966914211138531659c.png',
        'https://img-blog.csdnimg.cn/83149587380f48f39757ead8a7e39ad9.jpeg'
      ],
      text : [
        '恭喜！你和她的默契程度已经爆表！连拼图都为之倾倒～',
        '哇哦！你们成功解锁了"最佳搭档"成就！拼图什么的都是小case啦！',
        '厉害！你的拼图技能让她都忍不住为你鼓掌！接下来准备迎接更多挑战吧！',
        '完美通关！她看你的眼神里都是小星星✨ 这就是拼图的魔力吗？',
        '拼图完成！你们的故事比这拼图还要精彩一百倍呢！',
        '大成功！连拼图都在为你们的缘分欢呼雀跃！',
        '通关撒花！你们的配合简直天衣无缝，连拼图都甘拜下风！'
      ],
      randomText: ''
    };
  },
  beforeMount() {
    this.showRandomImage();
    this.setRandomText();
    this.startCelebration();
  },
  methods: {
    showRandomImage() {
      const randomIndex = Math.floor(Math.random() * this.images.length);
      this.currentImage = this.images[randomIndex];
    },
    setRandomText() {
      const randomIndex = Math.floor(Math.random() * this.text.length);
      this.randomText = this.text[randomIndex];
    },
    confettiStyle(n) {
      return {
        left: Math.random() * 100 + '%',
        animationDelay: Math.random() * 3 + 's',
        background: `hsl(${Math.random() * 360}, 100%, 50%)`,
        transform: `rotate(${Math.random() * 360}deg)`
      };
    },
    startCelebration() {
      // 可以添加音效或更多动画
    },
    shareResult() {
      alert('分享功能开发中... 先截图炫耀一下吧！📸');
    },
    playAgain() {
      this.$store.commit('SET_STAGE', 1);
      this.$router.replace('/game');
    }
  },
};
</script>

<style scoped>
.bg {
  position: relative;
  width: 100%;
  overflow: hidden;
  min-height: 100vh;
}

.character-image {
  width: 100%;
  height: 100vh;
  object-fit: cover;
  animation: gentleZoom 10s ease-in-out infinite;
}

@keyframes gentleZoom {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.celebration {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.confetti {
  position: absolute;
  width: 10px;
  height: 10px;
  animation: fall 3s linear infinite;
}

@keyframes fall {
  0% {
    transform: translateY(-100px) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) rotate(360deg);
    opacity: 0;
  }
}

.achievement-badge {
  position: absolute;
  top: 20%;
  right: 10%;
  background: linear-gradient(45deg, #FFD700, #FFA500);
  padding: 1rem 2rem;
  border-radius: 50px;
  animation: bounce 2s infinite;
  box-shadow: 0 10px 30px rgba(255, 215, 0, 0.4);
}

.badge-icon {
  font-size: 3em;
  text-align: center;
}

.badge-text {
  color: white;
  font-weight: bold;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
  text-align: center;
}

.overlay-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2.5em;
  color: #ffffff;
  text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.8);
  font-family: 'Comic Sans MS', cursive, sans-serif;
  z-index: 1;
  background: linear-gradient(45deg, rgba(247, 202, 202, 0.8), rgba(255, 255, 255, 0.8));
  padding: 2rem 3rem;
  border-radius: 20px;
  text-align: center;
  animation: textGlow 2s ease-in-out infinite alternate;
  backdrop-filter: blur(10px);
  border: 2px solid rgba(255,255,255,0.3);
}

@keyframes textGlow {
  0% { 
    box-shadow: 0 0 20px rgba(255,255,255,0.5);
    transform: translate(-50%, -50%) scale(1);
  }
  100% { 
    box-shadow: 0 0 40px rgba(255,255,255,0.8);
    transform: translate(-50%, -50%) scale(1.05);
  }
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

.share-buttons {
  position: absolute;
  bottom: 10%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 2rem;
  z-index: 2;
}

.share-btn, .retry-btn {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1rem 2rem;
  border: none;
  border-radius: 50px;
  font-size: 1.2em;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 8px 25px rgba(0,0,0,0.3);
}

.share-btn {
  background: linear-gradient(45deg, #4CAF50, #8BC34A);
  color: white;
}

.retry-btn {
  background: linear-gradient(45deg, #2196F3, #03A9F4);
  color: white;
}

.share-btn:hover, .retry-btn:hover {
  transform: translateY(-5px) scale(1.1);
  box-shadow: 0 12px 35px rgba(0,0,0,0.4);
}

.btn-icon {
  font-size: 1.5em;
}
</style>